<template>
  <el-drawer custom-class="drawer-box" v-model="drawerData.show" :title="drawerData.title" :direction="direction" :before-close="handleClose" :close-on-click-modal="false" size="35%">
    <template #title>
      <span class="drawer-title">{{ drawerData.title }}</span>
    </template>
    <div class="form-box">
      <el-form class="ruleFormRef" ref="ruleFormRef" :model="formData" :rules="rules" label-width="180px">
        <el-form-item label="商户号单日付款总额度" prop="corp_daily_pay_amount">
          <el-input-number v-model="formData.corp_daily_pay_amount"  :min="0.30" :max="10000.00" :controls="false" :precision="2" placeholder="请输入商户号单日付款总额度" />
          <span class="unit" >元</span>
        </el-form-item>
        <span class="coverbottom">精确到小数点后两位，可输入0.30～10000.00</span>
         <el-form-item label="单日客户收到红包次数" prop="cust_daily_receive_number">
          <el-input-number v-model="formData.cust_daily_receive_number" :min="1" :max="10" :controls="false" :precision="0" placeholder="请输入单日客户收到红包次数" />
          <span class="unit" >次</span>
        </el-form-item>
         <span class="coverbottom">可输入1～10正整数</span>
         <el-form-item label="单日客户收到红包金额" prop="cust_daily_receive_amount">
          <el-input-number v-model="formData.cust_daily_receive_amount"  :min="0.30" :max="5000.00" :controls="false" :precision="2" placeholder="请输入单日客户收到红包金额" />
          <span class="unit" >元</span>
        </el-form-item>
         <span class="coverbottom">精确到小数点后两位，可输入0.30～5000.00</span>
      </el-form>
      <div class="contant">
        <div> 温馨提示：</div>
        <div>若在本系统所填写的数值超过在【微信支付商户平台】配置的数值，执行规则依然以官方配置为准，请合理填写。建议您先在【微信支付商户平台】---【产品中心】-【企业付款到零钱】--【产品设置】，将所有数值设置到官方最大值（如下），再到本系统里进行配置。</div>
        <div>a、商户号单日出款额度：10万</div>
        <div>b、单人单日付款额度：5000元</div>
        <div>c、单笔付款最低额度：0.30元， 默认每天最多可向同一个用户付款10次</div>
      </div>
      <div class="btn-box">
        <blockquote>
          <!-- <el-button v-if="drawerData.controlType != 'edit'" @click="initFormData">重置</el-button> -->
          <el-button type="primary" @click="saveFun">保存</el-button>
        </blockquote>
      </div>
    </div>
  </el-drawer>
</template>

<script lang="ts" setup>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
import bus from '@/utils/bus'
import { uploadFile2 } from '@/api/common'
import { ElForm, ElMessage, ElSteps, UploadProps } from 'element-plus'
import { getlimitinfo, getlimitinfosave } from '@/api/employe/redmanage/redmanageWord'
type FormInstance = InstanceType<typeof ElForm>
const emit = defineEmits(['save'])
const ruleFormRef: any = ref<FormInstance>()
const props = defineProps(['sourceArr'])
const canEditPhone = ref(true)
let drawerData = ref({
  show: false,
  title: '客户限额',
  direction: 'rtl', //从右往左打开
  userInfo: {}, //查看
  controlType: 'create'
})

const formData = ref({
  corp_daily_pay_amount: 0.3,
  cust_daily_receive_number: 1,
  cust_daily_receive_amount: 0.3,
  id: ''
})

let nowUploadKey = ''
const getUploadKey = (key: string) => {
  nowUploadKey = key
}

// 重置
const initFormData = () => {
  ruleFormRef.value?.resetFields()
}

// 关闭
const handleClose = () => {
  drawerData.value.show = false
}

let rules: any = ref({
  corp_daily_pay_amount: { required: true, trigger: 'blur', message: '请输入商户号单日付款总额度' },
  cust_daily_receive_number: { required: true, trigger: 'blur', message: '请输入单日客户收到红包次数' },
  cust_daily_receive_amount: { required: true, trigger: 'blur', message: '请输入单日客户收到红包金额' }
})

// 当前渲染的参数
let formAttrList: any = ref([])
let customAttrList: any = reactive({
  data: []
})

// 初始化数据
const getAttrListFun = () => {
  getlimitinfo({})
    .then((res: any) => {
      formData.value.corp_daily_pay_amount = res.corp_daily_pay_amount
      formData.value.cust_daily_receive_amount = res.cust_daily_receive_amount
      formData.value.cust_daily_receive_number = res.cust_daily_receive_number
      formData.value.id = res.id
    })
    .catch((e: object) => {
      ElMessage.error('服务器开小差')
      handleClose()
    })
}

watch(
  () => drawerData.value.show,
  (val: boolean) => {
    if (val) {
      // drawerData.value.title = drawerData.value.controlType == 'create' ? '添加客户' : drawerData.value.controlType == 'edit' ? '编辑客户' : '查看客户'
      getAttrListFun()
    }
  }
)

// 保存
const saveFun = () => {
  ruleFormRef.value.validate((valid: boolean) => {
    console.log(valid, 555)
    if (valid) {
      getlimitinfosave(formData.value)
        .then((r: object) => {
          ElMessage.success('保存成功')
          handleClose()
          emit('save', true)
        })
        .catch((e: object) => {})
    }
  })
}

defineExpose({
  drawerData
})
</script>

<style lang="scss" scoped>
:deep .el-input__inner{
text-align: left;
}
:deep .el-input-number{
  width:300px
}
:deep .el-form-item{
margin: 10px 0px;
}
.coverbottom{
  font-size:12px;
  color:#969696;
  margin-left: 180px;
}
.unit{
  margin-left: 5px;
}
.drawer-box {
  .drawer-title {
    color: #333;
    font-weight: bold;
  }
  .form-box {
    max-height: calc(100vh - 126px);
    overflow-y: scroll;
    .ruleFormRef {
      margin-bottom: 40px;
    }
    .btn-box {
      text-align: right;
      border-top: solid 1px #eee;
      padding: 20px;
    }
  }
  .form-box::-webkit-scrollbar {
    display: none;
  }
}
.upload-content {
  &.noEdit {
    pointer-events: none !important;

    .upload-box {
      background: lightgray;
      position: relative;
      &::after {
        content: '';
        width: 100%;
        height: 100%;
        background: lightgray;
        opacity: 0.6;
        position: absolute;
        top: 0;
        left: 0;
      }
    }
  }
  .upload-box {
    width: 110px;
    height: 110px;
    text-align: center;
    border-radius: 4px;
    background: #f8f8f8;
    border: 1px solid #eaeaea;
    box-sizing: border-box;
    padding-top: 28px;
    img {
      width: 20px;
      height: 20px;
    }
    div {
      width: 100%;
      line-height: 14px;
      font-size: 14px;
      font-family: STHeitiSC-Light, STHeitiSC;
      color: #ff6b00;
    }
  }
  .upload-file-box {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 4px;
    border: 1px solid #eaeaea;
    overflow: hidden;
    .del {
      position: absolute;
      width: 20px;
      height: 20px;
      top: 10px;
      right: 10px;
    }
  }
  .upload-desc {
    font-size: 14px;
    font-family: STHeitiSC-Light, STHeitiSC;
    font-weight: 300;
    color: #969696;
    padding-top: 10px;
    span {
      color: #ff6b00;
      cursor: pointer;
    }
  }
}
.contant {
  border: 1px solid #eaeaea;
  background: #f9f9f9;
  padding: 20px 15px;
  line-height: 20px;
  div {
    margin-bottom: 10px;
    color: #969696;
    font-size: 13px;
  }
}
</style>
